<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>表单控件的尺寸</title>
</head>
<body>
    <div class="container">
        <form >
            <!-- 控制表单的宽的主要通过控制表单列的宽度，也就是父容器的宽度 -->
            <div class="form-row">
                <div class="col-sm-6 form-group">
                    <label>城市</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-sm-6 form-group">
                    <label>区</label>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="form-row form-group">
                <!-- 大型输入框，lebel通过添加 col-form-label-lg来控制-->
                <!--  input通过 添加form-control-lg来控制-->
                <label class="col-sm-2 col-form-label col-form-label-lg">邮箱</label>
                <input type="email" class="form-control form-control-lg  col-sm-10" placeholder="请输入邮箱">
            </div>
            <div class="form-row form-group">
                <label class="col-sm-2 col-form-label">邮箱</label>
                <input type="email" class="form-control col-sm-10" placeholder="请输入邮箱">
            </div>
            <div class="form-row form-group">
                <label class="col-sm-2 col-form-label col-form-label-sm">邮箱</label>
                <input type="email" class="form-control form-control-sm  col-sm-10" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <input type="password" class="form-control">
                <!-- 给表单添加帮助文字 -->
                <small class="form-text text-muted">
                    密码长度时8到12个字符，必须包含字母，数字，特殊字符，不能包含空格
                </small>
            </div>
        </form>
    </div>
    
</body>
</html>